import React from 'react';
import { Descriptions, Badge } from 'antd';

function FailFlowServerDetail({ info }) {
  return (
    <Descriptions size="small" title="详细信息" bordered>
      <Descriptions.Item span={1} label="应用名称">{info.appName || '-'}</Descriptions.Item>
      <Descriptions.Item span={1} label="请求方法">{info.request_method || '-'}</Descriptions.Item>
      <Descriptions.Item span={1} label="状态码">{info.status || '-'}</Descriptions.Item>
      <Descriptions.Item span={1} label="请求时间">{new Date(info.time).toLocaleString() || '-'}</Descriptions.Item>
      <Descriptions.Item span={1} label="响应时间">
        {info.request_time}
      </Descriptions.Item>
      <Descriptions.Item span={1} label="状态">
        <Badge status={info.isSuccess ? 'error' : 'success'} text={info.isSuccess ? '异常' : '正常'} />
      </Descriptions.Item>
      <Descriptions.Item label="远程地址">{info.remote_addr || '-'}</Descriptions.Item>
      <Descriptions.Item label="请求路径">{info.request_uri || '-'}</Descriptions.Item>
      <Descriptions.Item label="服务名称">{info.server_name || '-'}</Descriptions.Item>
      <Descriptions.Item span={3} label="客户端">
        {info.http_user_agent || '-'}
      </Descriptions.Item>
    </Descriptions>
  );
}

export default FailFlowServerDetail;